<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			加不加font-size: 0;会有几像素的差距，加上去就是真正的垂直居中
			
			第一个：
			如果只设置了宽高是没有用的，vertical-align: middle是不会起作用的。原因是img前面的“幽灵空白节点”高度太小，
			几乎看不出变化。这时如果给这个节点一个足够大的值，则可以看出变化，即line-height的值足够大
			
			第二个：
			如果vertical-align: middle;是设置在子元素上的则不会起作用，必须要设置在父元素上
			*/
			.a{
				width: 400px;
				line-height: 400px;
				text-align: center;
				border: 1px solid;
				margin-bottom: 20px;
				font-size: 0;
			}
			.a img{
				vertical-align: middle;
				
			}
			
			.b{
				height: 400px;
				width: 400px;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				border: 1px solid;
				font-size: 0;
			}

		</style>
	</head>
	<body>
		<div class="a">
			<img src="../img/1.jpg" width="200">
		</div>
		<div class="b">
			<img src="../img/1.jpg" width="200">
		</div>
	</body>
</html>
